<template>
  <div class="app-container">
    <el-form ref="rows" :model="rows" :rules="rules" label-width="120px" @submit.prevent="onSubmit">
      <el-form-item label="类型" prop="type">
        <el-select v-model="rows.type" placeholder="请选择类型">
          <el-option v-for="(se,indexse) in typeli" :key="indexse" :label="se" :value="indexse" />
        </el-select>
      </el-form-item>
      <el-form-item label="分组">
        <el-select v-model="rows.group" placeholder="请选择分组">
          <el-option v-for="(opt,indexop) in grupli" :key="indexop" :label="opt" :value="indexop" />
        </el-select>
      </el-form-item>
      <el-form-item label="变量名" prop="name">
        <el-input v-model="rows.name" placeholder="请输入变量名" />
      </el-form-item>
      <el-form-item label="变量标题" prop="title">
        <el-input v-model="rows.title" placeholder="请输入变量标题" />
      </el-form-item>
      <el-form-item label="变量值">
        <el-input v-model="rows.value" placeholder="请输入变量值" />
      </el-form-item>
      <el-form-item label="提示">
        <el-input v-model="rows.tip" placeholder="请输入提示内容" />
      </el-form-item>
      <el-form-item label="扩展">
        <el-input v-model="rows.content" type="textarea" placeholder="" />
      </el-form-item>
      <el-form-item v-if="errorTips" label="">
        <span class="error-tips">{{ errorTips }}</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('rows')">提交</el-button>
        <el-button @click="resetForm('rows')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { configs, add } from '@/api/general'
import { notifySuccess } from '@/utils/message'
export default {
  data: function() {
    return {
      typeli: {},
      grupli: {},
      errorTips: '',
      rows: {
        type: '',
        group: 'default',
        name: '',
        title: '',
        value: '',
        tip: '',
        content: ''
      },
      rules: {
        type: [{ required: true, message: '请选择分类', trigger: 'change' }],
        group: [{ required: true, message: '请选择分组', trigger: 'change' }],
        title: [{ required: true, message: '请输入变量标题', trigger: 'blur' }],
        name: [{ required: true, message: '请输入变量名', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.initList()
  },
  methods: {
    initList() {
      configs().then(response => {
        this.typeli = response.data.typeli
        this.grupli = response.data.grupli
      })
    },
    onSubmit(formName) {
      var that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(that.rows).then(res => {
            notifySuccess(res.message || '提交成功')
            that.resetForm('rows')
          }).catch(err => {
            that.errorTips = err.message || '提交失败，请重试'
          })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.errorTips = ''
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.app-container {
  max-width: 800px;
}
.error-tips{color:red}
</style>
